<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .left {
            float: left;
            width: 20%;
            height: 100%;
            background-color: cornflowerblue;
            color: white;
        }

        .left ul {
            list-style: none;
        }

        .left ul li {
            margin: 10px;
            font-size: 1.2em;
            padding-left: 1em;
        }

        .left li:hover {
            background-color: rgb(47, 115, 239);
            cursor: pointer;
        }

        .right {
            width: 80%;
            float: right;
        }

        .nav {
            overflow: hidden;
        }

        .namebtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .navright {

            position: relative;
            float: right;
        }

        .navright-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .navright-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .navright-content a:hover {
            background-color: #f1f1f1
        }

        .navright:hover .navright-content {
            display: block;
        }

        .navright:hover .namebtn {
            background-color: #3e8e41;
        }


        .table table {
            width: 100%;
            text-align: center;
        }

        .table table td button {
            color: rgb(48, 98, 206);
            margin: 3px;
            padding: 3px;
            border: 0;
            border-radius: 3px;
            cursor: pointer;
            background-color: rgba(231, 35, 35, 0.909);
        }

        .table table td button:hover {
            color: white;
        }

        .table table caption {
            font-size: 2em;
            font-weight: bolder;
        }

        .table table thead tr {
            background-color: #008c8c;
            color: #fff;
        }

        .table table tbody tr:nth-child(odd) {
            background-color: #eee;
        }

        .table table tbody tr:hover {
            background-color: #ccc;
        }

        .nextpage {
            margin: 10px;
            text-align: right;
        }

        .nextpage button {
            padding: 4px;
            background-color: rgb(48, 98, 206);
            border: 0;
            border-radius: 2px;
        }

        .nextpage button:hover {
            color: white;
            cursor: pointer;
        }

        .pagebtn {
            min-width: 2em;
        }

        .inputquestion {
            width: 80%;
        }

        .inputquestion div {
            margin: 1em;
        }

        .textinput {
            width: 100%;
            min-width: 50%;
            min-height: 10em;
        }

        #quesubmit {
            float: right;
            padding: 5px;
            width: 5em;
            background-color: #4CAF50;
            border: 0;
            border-radius: 3px;
            cursor: pointer;
            color: white;
        }

        #quesubmit:hover {
            background-color: #3e8e41;
        }
    </style>

</head>

<body>
    <div class="left">
        <div>
            <p style="text-align: center; font-size: 1.3em;">管理员</p>
        </div>
        <ul>
            <li id="user">用户</li>
            <li id="question">题库</li>
            <li id="inputques">录题面试题</li>
        </ul>
    </div>
    <div class="right">
        <div id="nav">
            <div class="navright">
                <button class="namebtn">{{NAME}}</button>
                <div class="navright-content">
                    <a href="#">个人信息</a>
                    <a href="#">退出登陆</a>
                </div>
            </div>
        </div>

        <div class="inputquestion">
            <div>
                题名: <input type="text" id="name">
            </div>

            <div>
                难度:
                <select id="star">
                    <option value="入门">入门</option>
                    <option value="简单">简单</option>
                    <option value="中等">中等</option>
                    <option value="困难">困难</option>
                </select>
            </div>
            <div>
                时间限制: <input type="number" id="timelimit">&nbsp;&nbsp;s<br>
                空间限制: <input type="number" id="spacelimit">&nbsp;&nbsp;kb<br>
            </div>
            <div>
                <p>题目描述:</p>
                <textarea name="" class="textinput" id="quesdesc" cols="60" rows="20s"></textarea>
            </div>
            <div>
                <p>预设代码:</p>
                <textarea name="" class="textinput" id="quescode" cols="60" rows="20s"></textarea>
            </div>
            <div>
                <p>判题代码:</p>
                <textarea name="" class="textinput" id="judgecode" cols="60" rows="20s"></textarea>
            </div>
            <div>
                <input type="button" id="quesubmit" value="提交">
            </div>
        </div>


    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $.ajaxSetup({
            beforeSend(xhr) {
                xhr.setRequestHeader("Authorization", sessionStorage.getItem("token"))
            }
        })
        $("#question").click(function () {
            location.href = "/login/admin_questions/" + sessionStorage.getItem("username");
        })

        $("#user").click(function () {
            location.href = "/login/admin_users/" + sessionStorage.getItem("username");
        })

        $("#inputques").click(function () {
            location.href = "/login/admin_input_question/" + sessionStorage.getItem("username");
        })

        $("#quesubmit").click(function () {
            var quesname = $("#name").val();
            var star = $("#star").val();
            var timelim = $("#timelimit").val();
            var spacelim = $("#spacelimit").val();
            var quesdesc = $("#quesdesc").val();
            var quescode = $("#quescode").val();
            var judgecode = $("#judgecode").val();

            if (quesname.length <= 0) {
                alert("题目不能为空");
                return;
            }
            if (timelim.length <= 0) {
                alert("时间限制不能为空");
                return;
            } 
            if (spacelim.length <= 0) {
                alert("空间限制不能为空");
                return;
            } 
            if (quesdesc.length <= 0) {
                alert("题目描述不能为空");
                return;
            } 
            if (quescode.length <= 0) {
                alert("预设代码不能为空");
                return;
            }
             if (judgecode.length <= 0) {
                alert("判断代码不能为空");
                return;
            }

            $.ajax({
                type: "post",
                url: "/admin_inputques/input",
                dataType: "html",
                data: {
                    "quesname": quesname,
                    "star": star,
                    "timelim": timelim,
                    "spacelim": spacelim,
                    "quesdesc": quesdesc,
                    "quescode": quescode,
                    "judgecode": judgecode
                },
                success: function (res) {
                    alert(res);
                },
                error: function () {
                    alert("插入失败")
                }
            })
        })


    </script>
</body>

</html>